<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParams.params" @on-search="search" @on-reset="resetSearch"></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef" :fetch="fetch" :columns="tableConfig.columns" :operate="operate"
            :param="state.param" :toolbar="toolbar" :pagination="pagination"
            >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="state.importVisible"
      @close="closeImport"></importModal>
  </page-layout>
</template>
<script>
export default {
  name: "professorManage"
}
</script>
<script setup>
  import {
    btnIsPowerByCode,
    filterEmptyByObject
  } from '@/tools/common'
  import {
    message,
    modal
  } from 'ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    professorpage,
    remove,
    templateUrl, imports
  } from "@/api/module/professor";
  import {
    reactive,
    createVNode,
    ref,
    onMounted,
    onActivated
  } from 'vue';
  import {
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import moment from 'moment';
  import { useI18n } from "vue-i18n";
  import importModal from '@/component/import/index.vue'
  const  { t } = useI18n();
  const removeKey = "remove";
  const tableRef = ref()
  const router = useRouter()
  const pagination = {
    pageNum: 1,
    pageSize: 10,
  }
  let dictLists = reactive({
    data: {}
  })
  const state = reactive({
    selectedRowKeys: [],
    param: {},
    visibleSave: false,
    visibleEdit: false,
    visibleInfo: false,
    importVisible: false,
    recordEdit: {},
    recordInfo: {},
  })

  let searchParams = reactive({
    params: []
  })

  let tableConfig = reactive({
    columns: []
  })

  const resetSearch = () => {
    state.param = {
      name: null,
      credentialHighest: null,
      serviceSchool: null,
      createTime: null,
      citizenship: null
    }
    tableRef.value.reload()
  }

  /// 数据来源 [模拟]
  const fetch = async (param) => {
    const response = await professorpage(param);
    return {
      data: response.data.record,
      total: response.data.total
    };
  };

  const gotoAdd = () => {
    router.push('/university/professor-manage/add')
  }
  const exportConfig = reactive({
    title: '教授管理',
    exportExcel: imports,
    templateUrl: templateUrl,
    downMethod: 'GET',
    fileName: '教授管理导入模板',
    params: {}
  })
  /// 删除配置
  const removeMethod = (record) => {
    modal.confirm({
      title: '您是否确定要删除此配置?',
      icon: createVNode(ExclamationCircleOutlined),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        message.loading({
          content: "提交中...",
          key: removeKey
        });
        remove({
          "id": record.id
        }).then((response) => {
          if (response.success) {
            message.success({
              content: "删除成功",
              key: removeKey,
              duration: 1
            }).then(() => {
              tableRef.value.reload()
            })
          } else {
            message.error({
              content: "删除失败",
              key: removeKey,
              duration: 1
            })
          }
        })
      }
    });
  }

  /// 行操作
  const operate = [{
      label: t('button.detail'),
      event: (record) => {
        router.push({
          path: '/university/professor-manage/detail',
          query: {
            id: record.id
          }
        })
      }
    },
    {
      code: 'professor-manage:remove',
      label: t('button.delete'),
      event: function(record) {
        removeMethod(record)
      }
    },
  ];

  const toolbar = [{
      code: 'professor-manage:add',
      label: t('button.newly'),
      type: 'primary',
      event: (selectedRowKeys) => {
        gotoAdd()
      }
    },
    {
      code: '',
      label: t('button.batchImport'),
      type: '',
      event: (selectedRowKeys) => {
        handleExport()
      }
    },
  ]

  const handleExport = () => {
    state.importVisible = true
  };
  const closeImport = (value) => {
    state[value] = false
    tableRef.value.reload()
  }

  const openDialog = (type) => {
    state[type] = true
  }

  const search = (value) => {
    state.param = {
      ...state.param,
      ...filterEmptyByObject(value)
    }
  }

  const onSelectChange = selectedRowKeys => {
    state.selectedRowKeys = selectedRowKeys;
  };
  onActivated(() => {
    tableRef.value.reload();
  })
  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.CONTACT_STATUS,
      dictEnum.SEX,
    ])

    searchParams.params = [{
        dataIndex: "name",
        key: "name",
        type: "input",
        label: t('professor-manage.label.name'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "credentialHighest",
        key: "credentialHighest",
        type: "input",
        label: t('professor-manage.label.credentialHighest'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "serviceSchoolName",
        key: "serviceSchoolName",
        type: "input",
        label: t('professor-manage.label.school'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "createTime",
        key: "createTime",
        keys: ['statCreateTime', 'endCreateTime'],
        type: "rangeTime",
        label: t('professor-manage.label.createTime'),
        showTime: {
          format: 'HH:mm:ss'
        },
        format: 'YYYY:MM:DD HH:mm:ss',
        valueFormat: 'YYYY:MM:DD HH:mm:ss',
        placeholder: [t('placeholder.startTime'), t('placeholder.endTime')],
        hidden: true
      },
      {
        dataIndex: "createBy",
        key: "createBy",
        type: "input",
        label: t('professor-manage.label.createBy'),
        placeholder: t('placeholder.pleaseEnter'),
        hidden: true
      },
    ]
    tableConfig.columns = [
      {
        dataIndex: "code",
        key: "code",
        title: "教授编码"
      },
      {
        dataIndex: "name",
        key: "name",
        title: t('professor-manage.label.name')
      },
      {
        dataIndex: "serviceSchoolName",
        key: "serviceSchoolName",
        title: t('professor-manage.label.school')
      },
      {
        dataIndex: "phoneNumbe",
        key: "phoneNumbe",
        title: t('professor-manage.label.phone')
      },
      {
        dataIndex: "emailAddress",
        key: "emailAddress",
        title: t('professor-manage.label.email')
      },
      {
        dataIndex: "createBy",
        key: "createBy",
        title: t('professor-manage.label.createBy')
      },
      {
        dataIndex: "createTime",
        key: "createTime",
        title: t('professor-manage.label.createTime'),
        cellRender: (record, data) => {
          return moment(data).format('YYYY-MM-DD HH:mm:ss')
        }
      },
    ]
  })
</script>
